<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品明细</title>
    <link rel="shortcut icon" type="image/x-icon" th:href="@{../../static/img/index/bitbug_favicon.ico}"/>
    <link rel="stylesheet" th:href="@{../../static/css/bootstrap.css}"/>
    <link rel="stylesheet" th:href="@{../../static/css/detail/detail.css}"/>
    <script th:src="@{../../static/js/jquery-2.1.0.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{../../static/js/bootstrap.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{../../static/js/detail.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{../../static/js/template-web.js}"></script>
    <style>
        .choose {
            background: red;
        }

        #ageList input {
            margin-left: 20px;
        }

        #colorList input {
            margin-left: 20px;
        }

        .noboder {
            margin: 0 20px;
            width: 50px;
            border: none;
            padding-left: 10px;
        }

        #boder {
            padding: 5px;
        }

        .mglf {
            margin: 10px 20px;
        }
    </style>
</head>

<body>
<!--首页头部-->
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
    <div class="container">
        <ul class="nav navbar-nav">
            <li>
                <a href="#" style="font-size: 30px; font-family:'楷体';">宠物商城</a>
            </li>
            </li>
            <li th:if="${session.login_user!=null}">
                <a href="#" th:text="'欢迎您 :'+${session.login_user.getUsername()}"></a>
            </li>
            <li th:if="${session.login_user!=null}">
                <a th:href="@{/user/set}">个人中心</a>
            </li>
        </ul>
    </div>
</nav>
<hr class="divider"/>
<br>
<br>
<!--商品明细-->
<div class="container">
    <div class="row">
        <!--轮播图片-->
        <div class="col-lg-5">
            <div id="myCarousel" class="carousel slide">
                <!-- 轮播（Carousel）指标 -->
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>
                <!-- 轮播（Carousel）项目 -->
                <div class="carousel-inner">
                    <div class="item active">
                        <img th:src="@{../../static/img/index/lunbo/1.jpg}" alt="First slide">
                    </div>
                    <div class="item">
                        <img th:src="@{../../static/img/index/lunbo/2.jpg}" alt="Second slide">
                    </div>
                    <div class="item">
                        <img th:src="@{../../static/img/index/lunbo/3.jpg}" alt="Third slide">
                    </div>
                </div>
                <!-- 轮播（Carousel）导航 -->
                <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
        <!--商品信息-->
        <div class="col-lg-7" id="proInfo">
            <h2 th:text="${product.getProname()}"></h2>
            <h4 th:text="${product.getInfo()}"></h4>
            <p class="alert alert-info">
                价格
                <span class="price">
                    <span class="glyphicon glyphicon-yen"></span>
                    <span th:text="${product.getNewprice()}" id="newPrice">
                        1280.00
                    </span>
                </span>
                原价 :
                <strong class="old_price" th:text="${product.getOldprice()}" id="oldPrice">
                    1999
                </strong>
            </p>
            <p class="text-primary">
                运费 : <span>10</span>元 ;
                库存 : <span id="stock" th:text="${product.getStock()}"></span>
            </p>
            <hr/>
            <!--<p class="text-primary text-center col-lg-6">累计评价</p>
            <p class="text-primary text-center col-lg-6">送积分</p>-->
            <!--规格：不同类型商品，不同规格-->
            <div>
                <p>颜色分类 :</p>
                <div id="colorList">
                    <input type="button" class="btn btn-default colorList" th:each="color:${colorList}"
                           th:value="${color}">
                </div>
                <br/>
                <p>宠物年龄 :</p>
                <div id="ageList">

                </div>
                <br/>
                <form th:action="@{/oder/buy}">
                    <input type="hidden" id="proId" th:value="${product.getId()}" name="proid">
                    <div id="boder">
                        <label for="total" class="mglf">
                            数 量:
                        </label>
                        <span class="glyphicon glyphicon-minus"></span>
                        <input id="count" readonly class="noboder" value=1 type="number" name="counts">
                        <span class="glyphicon glyphicon-plus"></span>

                    </div>
                    <span>
                        <label for="total" class="mglf">
                            总价格:
                        </label>
                        <input type="text" readonly id="total" class="noboder" name="totalPrice">
                         元
                    </span>
                    <br>
                    <br>
                    <p>
                        <button class="btn btn-warning" type="submit">加入订单</button>
                        <a th:href="@{'/store/index/'+${store.getId()}}" class="btn btn-danger">进入店铺</a>
                    </p>
                </form>
            </div>
        </div>
    </div>
</div>
<hr/>
<!--商品详情-->
<div class="container">
    <div class="panel panel-warning">
        <div class="panel-heading">
            品牌名称 : <span th:text="${store.getStoreName()}"></span>
        </div>
        <div class="panel-body">
            <p class="text-primary">产品参数 : </p>
            <!--明细-->
            <div>
                <p class="col-lg-4" th:each="map:${propertyMap}">
                    <span th:text="${map.getKey()}" class="text-primary"></span>: &nbsp;
                    <span th:text="${map.getValue()}"></span>
                </p>

            </div>
            <!--明细图片展示-->
            <div class="text-center">
                <img th:src="@{../../static/img/index/products/detail/prodetail1.jpg}" alt=""/>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="model">
    {{ each ageList as value i}}
    <input type="button" class="btn btn-default ageList" value="{{value}}">
    {{/each}}
</script>
</body>
<script>
    $(function () {
        var max = 0;
        //点击颜色分类;获取年龄分类和库存
        $('.colorList').click(function () {
            $('#colorList').children('input').removeClass('choose');
            $(this).addClass('choose');
            $.ajax({
                url: "/product/sonDetail",
                type: 'post',
                async: true,
                dataType: 'json',
                data: {
                    "id": $('#proId').val(),
                    "color": $(this).val()
                },
                success: function (res) {
                    $('#stock').text(res.stock);
                    var html = template('model', res);
                    $('#ageList').html(html);
                },
                error: function (res) {
                    console.log(res);
                }
            });
        })
        //点击年龄分类; 获取库存和定价
        $('#ageList').on("click", '.ageList', function () {
            var proid = $('#proId').val() + '-' + $('#colorList').children($('.choose')).val() + '-' + $(this).val();
            $('#ageList').children('input').removeClass('choose');
            $(this).addClass('choose');
            $('#buy').attr('src', '/order/buy/' + proid);
            $('#proId').val(proid);
            $.ajax({
                url: "/product/getById",
                type: 'post',
                async: true,
                dataType: 'json',
                data: {
                    "id": proid
                },
                success: function (res) {
                    $('#oldPrice').text(parseFloat(res.oldprice));
                    $('#newPrice').text(parseFloat(res.newprice));
                    $('#stock').text(res.stock);
                    $('#count').val(1);
                    total();
                },
                error: function (res) {
                    console.log(res);
                }
            })
        });

        function total() {
            let price = parseFloat($('#newPrice').text());
            let count = $('#count').val();
            $('#total').val(price * count);
        }

        $('.glyphicon-minus').click(function () {
            let num = parseInt($('#count').val());
            if (num <= 1) {
                return false;
            } else {
                $('#count').val(num - 1);
            }
            total();
        })

        $('.glyphicon-plus').click(function () {
            let num = parseInt($('#count').val());
            if (num >= parseInt($('#stock').text())) {
                return false;
            } else {
                $('#count').val(num + 1);
            }
            total();
        })

    })
</script>
</html>